<template>
  <div class="lcds-root-container">
    <lc-list-filter :filter-length="0">
      <div class="lc-form" style="--formItemSpace: 150px">
        <el-form
          ref="formRef"
          :model="formModel"
          :rules="rules"
          :disabled="status === 'preview'"
          label-width="100px"
        >
          <lc-rower> </lc-rower>
        </el-form>
      </div>

      <template #operation>
        <div
          class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center"
          style="justify-content: flex-end"
        >
          <el-button class="lc-button" @click="handleResetListView">
            <lc-svg-icon class="lc-svg-icon" icon-class="reset"></lc-svg-icon>

            重置
          </el-button>
          <el-button
            class="lc-button"
            type="primary"
            @click="handleSearchListView"
          >
            <lc-svg-icon class="lc-svg-icon" icon-class="search"></lc-svg-icon>

            查询
          </el-button>
        </div>
      </template>
    </lc-list-filter>
  </div>
</template>

<script setup>
import { ref, unref } from "vue";

defineOptions({
  name: "ListFilter",
});

const emit = defineEmits(["submit", "search"]);

const props = defineProps({ status: { type: String, default: "" } });

const formRef = ref(null);
const formModel = ref({});
const loading = ref(false);
const rules = ref({});
const fuzzyQuery = ref({});

const handleResetListView = () => {
  unref(formRef).resetFields();
  handleSearchListView();
};
const handleSearchListView = async () => {
  const validated = await unref(formRef).validate();
  if (validated) {
    emit("search", {
      ...formModel.value,
      ...fuzzyQuery.value,
    });
  }
};

defineExpose({
  resetListView: handleResetListView,
  searchListView: handleSearchListView,
});
</script>
